<template>
    <div class="department">
        <el-card class="!border-none" shadow="never">
            <el-alert type="warning" :title="alertTitle" :closable="false" show-icon />
        </el-card>
        <el-card class="!border-none mt-4" shadow="never">
            <!-- <div>
                <el-button v-perms="['process.flowset/add']" type="primary" @click="handleAdd()">
                    <template #icon>
                        <icon name="el-icon-Plus" />
                    </template>
新增流程
</el-button>
<el-button @click="handleExpand"> 展开/折叠 </el-button>
</div> -->
            <el-table ref="tableRef" class="mt-4" size="large" v-loading="loading" :data="lists" row-key="id"
                :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">

                <el-table-column label="审批名称" prop="name" min-width="150" show-overflow-tooltip />
                <el-table-column label="审批状态" prop="status" min-width="100">
                    <template #default="{ row }">
                        <el-tag class="ml-2" :type="row.status ? '' : 'danger'">{{
                row.status_desc
            }}</el-tag>
                    </template>
                </el-table-column>
                <!-- <el-table-column label="序号" prop="id" min-width="60" />
                <el-table-column label="排序" prop="sort" min-width="100" />
                <el-table-column label="审批模式" prop="flowtype" min-width="180">
                    <template #default="{ row }">
                        <div v-if="row.flowtype == 1">并行审批</div>
                        <div v-if="row.flowtype == 2">同时审批</div>
                    </template>
                </el-table-column> -->
                <el-table-column label=" 操作" width="160" fixed="right">
                    <template #default="{ row }">
                        <el-button v-if="row.pid == queryParams.fid" v-perms="['process.flowset/add']" type="primary"
                            link @click="handleAdd(row.id, 0)">
                            新增人员
                        </el-button>
                        <el-button v-if="row.member_id > 0 && row.flowtype == 0" v-perms="['process.flowset/add']"
                            type="primary" link @click="handleAdd(row.id, -1)">
                            新增代签人
                        </el-button>
                        <!-- <el-button v-perms="['process.flowset/edit']" type="primary" link @click="handleEdit(row)">
                            编辑
                        </el-button> -->
                        <el-button v-if="row.member_id > 0" v-perms="['process.flowset/delete']" type="danger" link
                            @click="handleDelete(row.id)">
                            删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
        <edit-popup v-if="showEdit" ref="editRef" @success="getLists" @close="showEdit = false" />
    </div>
</template>
<script lang="ts" setup name="department">
import type { ElTable, FormInstance } from 'element-plus'
import EditPopup from './edit.vue'
import request from '@/utils/request'
import { flowDelete, flowLists } from '@/api/org/flow'
import useUserStore from '@/stores/modules/user'
import feedback from '@/utils/feedback'
import { routeLocationKey } from 'vue-router'
const userStore = useUserStore()
const tableRef = shallowRef<InstanceType<typeof ElTable>>()
const editRef = shallowRef<InstanceType<typeof EditPopup>>()
const formRef = shallowRef<FormInstance>()
let isExpand = false
const loading = ref(false)
const lists = ref<any[]>([])
const params = new URLSearchParams(window.location.search);
const queryParams = reactive({
    fid: params.get('fid'),
    deptid: userStore.userInfo.mydept

})
const showEdit = ref(false)
const getLists = async () => {
    loading.value = true
    lists.value = await flowLists(queryParams)
    loading.value = false
}
const alertTitle = "温馨提示：您正在设置" + userStore.userInfo.deptname + "部门的审批权限"
const resetParams = () => {
    formRef.value?.resetFields()
    getLists()
}

const handleAdd = async (id?: number, flowtype?: number) => {
    showEdit.value = true
    await nextTick()
    if (id) {
        editRef.value?.setFormData({
            fid: params.get('fid'),
            pid: id,
            deptid: userStore.userInfo.mydept,
            flowtype: flowtype
        })
    }
    editRef.value?.open('add')
}

const handleEdit = async (data: any) => {
    showEdit.value = true
    await nextTick()
    editRef.value?.open('edit')
    editRef.value?.getDetail(data)
}

const handleDelete = async (id: number) => {
    await feedback.confirm('确定要删除？')
    await flowDelete({ id })
    //request.post({ url: '/dept.flow/delete', params })
    getLists()
}

const handleExpand = () => {
    isExpand = !isExpand
    toggleExpand(lists.value, isExpand)
}

const toggleExpand = (children: any[], unfold = true) => {
    for (const key in children) {
        tableRef.value?.toggleRowExpansion(children[key], unfold)
        if (children[key].children) {
            toggleExpand(children[key].children!, unfold)
        }
    }
}

onMounted(async () => {
    await getLists()
    //userStore.getUserInfo()
    console.log('userStore=', userStore);
    nextTick(() => {
        handleExpand()
    })
})
</script>
